import {Control, Link} from "react-keeper";
require('./PageMyInfo.less');

import React from 'react';
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import {Accordion, List, NavBar,Card,Button,Modal, Badge,WhiteSpace, Toast} from 'antd-mobile';
import tphouse from '../../../assets/icon/房子A.png';
import Store from './Store';
import InfoView from "../../../components/info/InfoView";
import StorageUtils from "../../../app/storage";

const Item = List.Item;

const defaultModal = {
  modal: false,
  modalData: {},
  modalButtonText: {
    enroll: {
      visible: false,
      text: ''
    },
    vote: {
      visible: false,
      text: ''
    },
    auth: {
      visible: false,
      text: '授权',
      door: {}
    },
    reAuth: {
      visible: false,
      text: '删除授权',
      door: {}
    }
  }
};

class MyInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = defaultModal;
    this.showModal = this.showModal.bind(this);
    this.onClose = this.onClose.bind(this);
    this.doSignUp = this.doSignUp.bind(this);
    this.goToYwhTp = this.goToYwhTp.bind(this);
  }

  showModal(court, door) {

    this.setState({
      modal: true,
      modalData: door,
      modalButtonText: {
        enroll: {
          visible: court.rwCode === 'CAST01' && !court.isCastOk && (door.authInfo && !(door.authInfo.authorizer || door.authInfo.authorized)),
          text: court.isCastOk ? '' : (court.rwCode === 'CAST01' ? '报名参加业委会竞选' : '')
        },
        vote: {
          visible: court.activeRw !== null && (door.authInfo && (!door.authInfo.authorizer || door.authInfo.authorized)),
          text: court.activeRw ? court.activeRw + '投票' : ''
        },
        auth: {
          visible: !door.voteState && !door.castState && (door.authInfo && !door.authInfo.authorizer && !door.authInfo.authorized),
          text: '授权',
          door: door
        },
        reAuth: {
          visible: door.authInfo && door.authInfo.authorizer,
          text: '删除授权',
          door: door
        }
      }
    });
  };

  onClose() {
    let data = this.state.modalData;
    this.setState(defaultModal);
  };

  doSignUp() {

    let proprietor = StorageUtils.getStorageItem('proprietor');
    if (proprietor.synopsis && proprietor.record && proprietor.imageUrl) {
      let data = this.state.modalData;
      Modal.alert('候选人报名', '你确定要报名成为业委会选举候选人？', [
        {
          text: '确定',
          onPress: () => {
            this.setState({
              modal: false,
              modalData: {}
            });
            Actions.doSignUp(data.doorId);
          },
          style: 'default'},
        {
          text: '取消',
          onPress: () => {
            this.setState({
              modal: false,
              modalData: {}
            });
          },
          style: 'default'},
      ]);

    } else {
      Modal.alert('提示', '您的个人信息不全，是否现在就去完善？', [
        {
          text: '确定',
          onPress: () => {
            this.setState(defaultModal);
            Control.go('/home/introduce');
          },
          style: 'default'},
        {
          text: '取消',
          onPress: () => {
            this.setState(defaultModal);
          },
          style: 'default'},
      ]);
    }

  }

  goToYwhTp() {
    let data = this.state.modalData;
    this.setState(defaultModal);
    Control.go('/home/ywh/c/'+data.courtId);
  };

  // 查看业委会详情
  goToYwh() {
    let data = this.state.modalData;
    this.setState(defaultModal);
  };

  // 候选人报名

  // 业主权利授权
  goToAuth(door) {
    this.setState(defaultModal);
    Control.go('/home/door/auth/'+door.doorId);
  }

  // 业主撤销授权
  goToReAuth(door) {
    Control.go('/home/door/reauth/'+door.doorId);
  }

  render() {

    let t = this;
    let userInfo = t.state.info.userInfo;
    let courtAndDoor = t.state.info.courtsAndDoors;
    return (

      <div className="container" id="container">
        <NavBar mode="dark">我的</NavBar>
        <InfoView info={userInfo} proprietor={StorageUtils.getStorageItem('proprietor')} />

        <Accordion defaultActiveKey="0">
          <Accordion.Panel header="我的房产">
            <List>
              {
                courtAndDoor && courtAndDoor.length > 0 ?
                  <Accordion>
                    {
                      courtAndDoor.map((court) => {
                        return (
                          <Accordion.Panel header={'★' + court.name + (court.activeRw ? '(' + court.activeRw + '选举进行中' + ')' : '')} key={court.id}>
                            <List>
                              {
                                court.doors && court.doors.map(door => {
                                  return (
                                    <div onClick={() => {t.showModal(court, door);}}>
                                      <Item
                                        thumb={tphouse}
                                        arrow="horizontal"
                                        extra={
                                          <div>
                                            {door.authInfo && (door.authInfo.authorizer || door.authInfo.authorized) ? <Badge text={door.authInfo.authorizer ? '已授权' : (door.authInfo.authorized ? '被授权' : '')} style={{ marginLeft: 12, padding: '0 3px', backgroundColor: '#21b68a', borderRadius: 2 }} /> : null}
                                            {door.voteState ? <Badge text={'已投'} style={{margin: '0 5px'}} /> : null}
                                            {door.castState ? <Badge text={'候'} /> : null}
                                          </div>
                                        }
                                      >
                                        <a style={{ display: 'block', color: '#108ee9' }}>{door.building+"栋"+door.unit+"单元"+door.doorNo}</a>
                                      </Item>
                                    </div>
                                  );
                                })
                              }
                            </List>
                          </Accordion.Panel>
                        );
                      })
                    }
                  </Accordion>
                  :
                  <div className="no-data-div">暂无数据</div>
              }
            </List>
          </Accordion.Panel>
        </Accordion>
        <Modal
          popup
          visible={t.state.modal}
          onClose={() => t.onClose()}
          animationType="slide-up"
        >
          <List renderHeader={() => <div>操作</div>} className="popup-list">
            {
              t.state.modalButtonText.enroll.visible ?
                <List.Item>
                  <Button type="primary" onClick={() => t.doSignUp()}>{t.state.modalButtonText.enroll.text}</Button>
                </List.Item>
                :
                null
            }
            {
              t.state.modalButtonText.vote.visible ?
                <List.Item>
                  <Button type="primary" onClick={() => t.goToYwhTp()}>{t.state.modalButtonText.vote.text}</Button>
                </List.Item>
                :
                null
            }
            {
              t.state.modalButtonText.auth.visible ?
                <List.Item>
                  <Button type="primary" onClick={() => t.goToAuth(t.state.modalButtonText.auth.door)}>{t.state.modalButtonText.auth.text}</Button>
                </List.Item>
                :
                null
            }
            {
              t.state.modalButtonText.reAuth.visible ?
                <List.Item>
                  <Button type="primary" onClick={() => t.goToReAuth(t.state.modalButtonText.reAuth.door)}>{t.state.modalButtonText.reAuth.text}</Button>
                </List.Item>
                :
                null
            }
            <List.Item>
              <Button type="primary" onClick={() => Control.replace('/home/ywh/org/'+t.state.modalButtonText.reAuth.door.courtId)}>业委会详情</Button>
            </List.Item>
          </List>
        </Modal>
      </div>
    );
  }

  componentWillMount() {
    Actions.customInit();
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.info || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(MyInfo, Reflux.connect(Store, 'info'));


export default MyInfo ;
